<template>
  <div class="block">
    <div class="analysis-box">
      <div class="analysis-query">
        <el-select v-model="queryData.stationName" placeholder="请选择站点" style="width: 140px" class="filter-item">
          <el-option v-for="(item, index) in stationNameOptions" :key="index" :label="item" :value="item" />
        </el-select>
        <el-date-picker :clearable="false" v-model="value1" type="daterange" style="width: 250px" placeholder="选择开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="startChange" placement="bottom-start"></el-date-picker>
        <!-- <el-date-picker :clearable="false"  v-model="queryData.endTime" type="date" style="width: 140px" placeholder="选择结束时间" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="endChange" placement="bottom-start"></el-date-picker> -->
        <el-button type="success" class="reset" @click="reset">重置</el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>

      <el-table v-loading="listLoading" :data="rcvTableData" border fit height="600">
        <el-table-column label="序号" prop="id" align="center" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="站名" width="80px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.station }}</span>
          </template>
        </el-table-column>

        <el-table-column label="计划开行时间" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.planTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="计划开行数量" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.planTrainNumber }}</span>
          </template>
        </el-table-column>

        <el-table-column label="实际开行数量" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.trainNumber }}</span>
          </template>
        </el-table-column>

        <el-table-column label="兑现率" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.rateDict }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" :page-sizes="[10, 50, 100, 200, 500]" :total="total" :current-page="currentPage" align="center"></el-pagination>
      <el-dialog title="修改实际开行的列车数量" :visible.sync="dialogFormVisible">
        <el-form :model="postData" ref="postData" :rules="rules">
          <el-form-item prop="trainNumber" label="列车数量" :label-width="formLabelWidth">
            <el-input v-model="postData.trainNumber" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" :loading="btnloading" @click="modify">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getStationNames } from '@/api/dataQuery'
import { getShiftPlan, postShiftPlanDepart } from '@/api/statistics'
import { isStringEmpty } from '@/utils/validate'
import dayjs from 'dayjs'
import './index.scss'
export default {
  data() {
    const blurText = async (rule, value, callback) => {
      const boolean = new RegExp('^[1-9][0-9]*$').test(value) // console.log(boolean)
      if (!boolean) {
        this.$message.warning('请输入正整数')
        // this.postData.trainNumber = 0
      } else {
        callback()
      }
    }
    return {
      queryData: {
        stationName: '',
        startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
        endTime: dayjs().format('YYYY-MM-DD 23:59:59')
      },
      listLoading: false,
      tableKey: 0,
      value1: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      postData: {
        trainNumber: 0
      },
      rules: {
        trainNumber: [{ validator: blurText, trigger: 'blur' }]
      },
      btnloading: false,
      stationNameOptions: [],
      rcvTableData: [],
      tableHeight: 0,
      dialogFormVisible: false,
      editId: '',
      formLabelWidth: '100',
      editIdx: 0
    }
  },
  created() {
    this.getAllStationNames()
  },
  mounted() {},
  computed: {
    pickerOptions() {
      let _this = this
      return {
        disabledDate(time) {
          if (_this.queryData.startTime) {
            return time.getTime() < new Date(_this.queryData.startTime).getTime()
          } else {
            return false
          }
        }
      }
    }
  },
  watch: {},
  methods: {
    startChange(val) {
      // this.queryData.startTime = val + ' 00:00:00'
      this.queryData.startTime = val[0] + ' 00:00:00'
      this.queryData.endTime = val[1] + ' 23:59:59'
    },
    endChange(val) {
      this.queryData.endTime = val + ' 23:59:59'
    },
    modify() {
      this.btnloading = true
      const boolean = new RegExp('^[1-9][0-9]*$').test(this.postData.trainNumber)
      if (boolean) {
        this.postDepart()
      } else {
        this.btnloading = false
        return false
      }
    },
    openEdit(idx) {
      this.dialogFormVisible = true
      this.editIdx = idx.trainNumber
      this.editId = idx.id
      this.postData.trainNumber = idx.trainNumber
    },

    getAllStationNames() {
      getStationNames().then(res => {
        if (res.code == 0) {
          this.stationNameOptions = res.data
          this.queryData.stationName = res.data[0]
          let newobj = this.queryData
          this.getTableData(newobj)
        } else {
          this.listLoading = true
          this.$message('暂无数据')
        }
      })
    },
    postDepart() {
      let obj = {
        id: this.editId,
        trainNumber: this.postData.trainNumber
      }
      postShiftPlanDepart(obj).then(res => {
        if (res.code === 0) {
          this.$message.success('修改成功！')
          this.btnloading = false
          this.dialogFormVisible = false
          this.getTableData(this.queryData)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    reset() {
      this.queryData.startTime = dayjs().format('YYYY-MM-DD 00:00:00')
      this.queryData.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
      this.currentPage = 1
      this.pageSize = 10
      this.value1 = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')]
      this.getTableData(this.queryData)
    },
    search() {
      this.getTableData(this.queryData)
    },
    getTableData(newObj) {
      let obj = {
        page: this.currentPage,
        size: this.pageSize,
        obj: newObj
      }
      getShiftPlan(obj).then(res => {
        if (res.code == 0) {
          this.rcvTableData = res.data.records
          this.total = res.data.total
        } else {
          this.rcvTableData = []
          this.total = 0
          this.$message(res.msg)
        }
      })
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getTableData(this.queryData)
    },
    handleSizeChange: function(size) {
      this.pageSize = size
      this.getTableData(this.queryData)
    }
  }
}
</script>
